<template>
	<!-- <view>
		<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" :options="{ margin: 10 }"></uqrcode>
	</view> -->
	<view class="page">
		<view class="qrcode-box">
			<view class="qrcode">
				<u-qrcode ref="code" canvas-id="code" :value="text" :size="size" :options="{
		          foreground: {
		            image: {
		              src: '/static/logo.png',
		              width: 0.25,
		              height: 0.25,
		              align: ['center', 'center'],
		              anchor: [0, 0]
		            }
		          }
		        }" @click="remake" @complete="complete($event)"></u-qrcode>
				<!-- <uqrcode ref="uqrcode" canvas-id="qrcode" :value="text" :options="{ margin: 10 }"></uqrcode> -->
				
			</view>
			<text class="msg">这是一个带logo的二维码，logo处于二维码中间</text>
			<button class="save" type="primary" size="mini" @click="save('code')">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data( ) {
			return {
				text: 'https://uqrcode.cn/doc',
				size: 200
			}
		},
		methods: {
			complete( e ) {
				if ( e.success ) {
					console.log( '生成成功' );
				} else {
					console.log( '生成失败' );
				}
			},
			remake( ) {
				const ref = this.$refs[ 'code' ];
				ref.remake( );
			},
			save( ) {
				uni.showLoading( {
					title: '保存中',
					mask: true
				} );
				const ref = this.$refs[ 'code' ];
				ref.save( {
					success: res => {
						uni.hideLoading( );
						uni.showToast( {
							icon: 'success',
							title: '保存成功'
						} );
					},
					fail: err => {
						uni.showToast( {
							icon: 'none',
							title: JSON.stringify( err )
						} );
					}
				} );
			}
		}
	}
</script>

<style>
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qrcode-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30px;
		padding: 0 30px;
	}

	.qrcode {
		padding: 16px;
		background-color: #ffffff;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
		border-radius: 2px;
		overflow: hidden;
	}

	.msg {
		margin-top: 15px;
		font-size: 14px;
		color: #9a9b9c;
	}

	.save {
		margin-top: 10px;
	}
</style>